<template>
      <!-- 项目情况 -->
        <div>
            <div class="pro-situation">
                <div class="project-con">
                    <span class="bar-left"></span>
                  <span style="margin:0 20px;"> 项目分解情况 </span>
                    <span class="bar-left"></span>
                  
                    <div class="cir-chart">
                        <chart :option='option'></chart>
                    </div>
                  
                </div>
            </div>

            <div class="pro-speciality">
                <span class="spec-tit">专项情况</span>
              
                <p> <span></span>各单位管理</p>
                <ul class="spec-ul" v-if="proTitle == '项目分解情况'">
                    <li v-for="item in specList" :key="item.id">
                        <span class="spec-label">{{item.name}}</span>
                        <p style="width:316px;height:14px;background:#36CBCB;"></p>
                        
                    </li>
                </ul>
               
            </div>
        </div>


</template>

<script>
import chart from './chart.vue';
export default {
  components: {
      chart
  },
  data() {
    return {
        legendTit1:"已分解",
        legendTit2:"未分解",
        seriesD1:"100",
        seriesD2:"0",
        isText:false,
        blueColor:"#3aa0ff",
        customColor:"#36cbcb",
        proTitle:"项目分解情况",
        isTitle:false,
        option:{},
        priceData:'3.1236亿元',
        specList:[
            {
                id:1,
                name:"电网基建",
                value:100
            },
            {
                id:2,
                name:"电网小型基建",
                value:100
            },
            {
                id:3,
                name:"生产技改",
                value:100
            },
            {
                id:4,
                name:"生产辅助技改",
                value:100
            },
{
                id:17,
                name:"生产大修",
                value:100
            },
          
            {
                id:6,
                name:"生产辅助大修",
                value:100
            }
               ,{
                id:18,
                name:"零星购置",
                value:100
            },
            {
                id:28,
                name:"市场营销",
                value:100
            },
            {
                id:38,
                name:"电网数字化",
                value:100
            },
            {
                id:48,
                name:"研究开发",
                value:100
            },

            {
                id:58,
                name:"教育培训",
                value:100
            },
            {
                id:68,
                name:"股权投资",
                value:100
            }   ,
            {
                id:27,
                name:"管理咨询",
                value:100
            },
           
           

        ],
        execValue:"",
        execSelList:[
            {
                label:'ERP建项率',
                value:'1',
            },
            {
                label:'项目启动率',
                value:'2',
            },
            {
                label:'项目开工率',
                value:'31',
            },
            {
                label:'成本发生率',
                value:'41',
            },
            {
                label:'项目竣工率',
                value:'51',
            }
        ]
    };
  },
  computed: {
      
  },
  mounted() {
      this.setOption()
  },
  methods:{
        selectTitle(){
            this.isTitle = !this.isTitle
        },
        // 分解情况
        resolveSitu(){
            this.proTitle = "项目分解情况"
            this.isTitle = false
            this.legendTit1="已分"
            this.legendTit2="未分解"
            this.seriesD1="10"
            this.seriesD2="0"
            this.setOption()
        },
        // 执行情况
        executeSitu(){
             this.proTitle = "项目执行情况"
             this.isTitle = false
            this.legendTit1="已完成"
            this.legendTit2="未完成"
            this.seriesD1="10"
            this.seriesD2="0"
            this.setOption()

        },
        setOption(){
    		const _this = this
    		_this.option = {
    			color: ['#1890ff','#facc14'],
                title:{
                    text: "111亿元",
                    x: 140,
                    y: 130,
                    textStyle: {
                        fontSize:14,
                        fontWeight:'normal',
                        color: ['black'],
                        textAlign:"center"
                    },
                    subtextStyle: {
                        color: '#666',   
                        fontSize: 30
                    },
                    // top:100, 

                },
                
			    legend: {
                    orient: 'vertical',
                    right: 10,
                    bottom:10,
                    data: [_this.legendTit1, _this.legendTit2]
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: 'funnel'
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
			    series: [
                    {
                        name: '分解情况',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        startAngle:200,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data: [
                            {value: _this.seriesD1, name:_this.legendTit1},
                            {value: _this.seriesD2, name:_this.legendTit2}
                        ],
                         itemStyle: {
                        labelLine: {
                                    show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                                }
                             },
                        // itemStyle: {
                        label: {
                            normal: {
                                // label: {
                                    // show: true,
                                    position: 'center',
                                    // formatter:`省管规模`,
                                      formatter: function() {
                                                   return "省管规模";
                                             },
                                     textStyle:{
                                        fontSize: 12,
                                        color:'#9c9c9c'
                                    }
                                },
                               
                            },
                        // },
                        
                    }

			        
			    ]
			};
    	},
  }
};
</script>
<style >
html,body ,ul{
    margin: 0;
    padding: 0;
}
    .spec-bar .el-progress-bar {
        height: 100% !important;

    }
    .spec-bar .el-progress-bar .el-progress-bar__outer {
        height: 100% !important;
    }
</style>
<style lang="scss" scoped>


.pro-situation {
    width: 466px;
    height: 286px;
    background: #fff;
    box-shadow: 0px 0px 20px gainsboro;
    position: absolute;
    top: 10px;
    left: 20px;
    .project-con{
        width: 90%;
        height: 100%;
        margin-left: 5%;
        padding: 20px 0;
        position: relative;
        text-align: center;
        .bar-left{
            width: 30%;
            display: inline-block;
            height: 1px;
            background-color: #d8d8d8;
            vertical-align: middle;

        }
        .project-title {
            display: inline-block;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            color: #595959;
            margin-left: 30px;
            margin-right: 10px;
            cursor: pointer;
        }
        .el-icon-arrow-down {
             cursor: pointer;
             margin-right: 4px;
        }
        .project-sel{
            position: absolute;
            z-index: 99;
            top: 20px;
            left: 50%;
            width: 150px;
            margin-left: -75px;
            padding: 10px 0;
            background-color: #fff;
            border: 1px solid #ededed;
            color: #696969;
            font-size: 14px;
            border-radius:2px;
            .sel-option{
                width: 100%;
                height: 40px;
                line-height: 40px;
                display: block;
            }
            .sel-option:hover{
                background-color: #e9f2f1;
                color: #3b8b87;
            }
        }
        .cir-chart {
            
            height: calc(100% - 100px);
        }
        .exec-select {
            position: absolute;
            width: 120px;
            top: 48px;
            right: 0;
            z-index: 99;
        }
    }
}
.pro-speciality {
    width: 466px;
    height: 495px;
    background: #fff;
    box-shadow: 0px 0px 20px gainsboro;
    position: absolute;
    top: 310px;
    left: 20px;
      p{
            width: 430px;
            margin: 0 auto;
            height: 15px;
            font-size: 10px;
            color: #c0b7b7;
            text-align: right;
            span{
                display: inline-block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background:#36cbcb ;
                margin-right: 10px;
            }
        }
    .spec-tit {
        font-size: 14px;
        font-weight: 600;
        height: 36px;
        line-height: 36px;
        border-bottom: 1px solid #fbfbfb;
        display: block;
        padding-left: 10px;
      
    }
    .spec-ul {
        list-style: none;
        width: 94%;
        margin-left: 3%;
        margin-top: 5px;
        height: 70%;
        // overflow: auto;
        li {
            height: 20px;
            margin: 13px 0;
            display: flex;
            .spec-label{
                width: 25%;
                display: inline-block;
                text-align: right;
                margin-right: 2%;
                color: #595959;
                line-height: 20px;
                // margin-top: -10px;
                
            }
            p{
                display: inline-block;
                // line-height: 40px;
                margin-top: 2px;
            }
            .spec-bar{
                height: 16px;
                width: 68%;
                display: inline-block;
                // background-color: #ebf3f2;
                vertical-align: middle;
                position: relative;
                line-height: 20px;

            }
           
            .progress-two {
                display: inline-block;
                width: 68%;
                vertical-align: middle;
                 .spec-bar-exec{
                    height: 8px;
                    width: 100%;
                    display: inline-block;
                    vertical-align: middle;
                    position: relative;
                }
            }
          
        }

    }
    .spec-desc {
        position: absolute;
        top: 0;
        right: 10px;
        .desc-cir{
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #36cbcb;
            border-radius:4px;
        }
        .blue-col {
            background-color: #3aa0ff !important;
        }
        
        .desc-text{
            color: #969696;
            font-size: 12px;
            line-height: 36px;
            margin-left: 5px;
        }
    }
    .general-posi{
        position: absolute;
        top: 0;
        right: 110px;
    }

}
</style>